<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <style>
        ._con_water_fall {
            position: absolute;
            display: none;
        }
        .demo_water_flow_container::-webkit-scrollbar{
            display:none
        }
        .nav-item {
            position: relative;
            width: 100%;
            padding: 10px;
            padding-bottom: 5px;
            border-bottom: 1px solid #eaeaea;
        }
        .nav-item .title {
            font-size: 20px;
        }
        .nav-item a {
            margin-right: 5px;
        }

        a {
            color: #333 !important;
            text-decoration : none !important;
        }
        a:hover{
            color: gray !important;
        }
        li {
            list-style: none;
        }
        .nav-item icon {
            position: absolute;
            right: 10px;
            top: 30px;
        }
    </style>
</head>

<body>
        <div id="demo_x" class="" ></div>
</body>

<!-- 必要 -->
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="./render_somthing.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<script>
    {
        var render_somthing_demo_x;
        render_somthing_demo_x = new render_somthing();
        render_somthing_demo_x.init({
            // div的id
            id: "#demo_x",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
<ul style="padding-left:0px;"></ul>
    `
            },
            // 渲染内容的配置
            content: {
                default: `
                <li class="nav-item">
                    <div class="title" style="cursor: pointer;">#{main_category}</div>
                    <p style="margin-bottom: 0px;">
                        #{category}
                    </p> 
                    <icon>></icon>
                </li>
`,
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
                #{title}     - 变量，表示数据数组中对象的key
            */
            condition: [
            ],
        })
        render_somthing_demo_x.render([{
                        main_category:"儿童图书",
                        category:`
                        <a href="#">中国</a>
                        <a href="#">外国</a>
                        <a href="#">卡通</a>`,
                    }, {
                        main_category:"人文社科",
                        category:`
                        <a href="#">历史</a>
                        <a href="#">文化</a>
                        <a href="#">古籍</a>`,
                    }, {
                        main_category:"科技",
                        category:`
                        <a href="#">计算机</a>
                        <a href="#">物联网开发</a>
                        <a href="#">网络工程</a>`,
                    }, {
                        main_category:"儿童图书",
                        category:`
                        <a href="#">中国</a>
                        <a href="#">外国</a>
                        <a href="#">卡通</a>`,
                    }, {
                        main_category:"生活",
                        category:`
                        <a href="#">美食</a>
                        <a href="#">旅游</a>
                        <a href="#">休闲</a>`,
                    }, {
                        main_category:"励志",
                        category:`
                        <a href="#">小说</a>
                        <a href="#">人生哲学</a>
                        <a href="#">青春文学</a>`,
                    }, ]);
    }
</script>

</html>